<template>
<img src="./index.jpg" alt="" style="width: 100% ;height: 100%">
  <!-- <div class='big-screen-wrapper'>
    <div class='title-wrapper'>
      <div class='title'>项目分包队伍引进模型</div>
      <div class='category'>
        <a-select
          show-search
          v-model='selectProject'
          @change='handleProjectChange'
        >
          <a-select-option value='1'>
            项目1
          </a-select-option>
          <a-select-option value='2'>
            项目2
          </a-select-option>

        </a-select>
      </div>
    </div>
    <div class='content-wrapper'>
      <div class='left-wrapper'>
        <div>
          <div class='chart-title'>分包类别比重(合同额)...</div>
          <chartPie
            v-if='sourceChartOption1'
            :sourceChartOption='sourceChartOption1'
          ></chartPie>
        </div>
        <div>
          <div class='chart-title'>分包类别比重(合同数量)...</div>
          <chartPie
            v-if='sourceChartOption2'
            :sourceChartOption='sourceChartOption2'
          ></chartPie>
        </div>
        <div>
          <div class='chart-title'>合同金额波动...</div>
          <chartStackLine
            v-if='sourceChartOption3'
            :sourceChartOption='sourceChartOption3'
          ></chartStackLine>
        </div>
        <div>
          <div class='chart-title'>合同数量波动...</div>
          <chartStackLine
            v-if='sourceChartOption4'
            :sourceChartOption='sourceChartOption4'
          ></chartStackLine>
        </div>
      </div>
      <div :class="'middle-wrapper'+selectProject"></div>
      <div :class="'right-wrapper'+selectProject"></div>
    </div>
  </div> -->
</template>

<script>
  import {chartPie, chartLine, chartStackLine} from '@/components/BaseCharts/index'

  export default {
    name: 'index',
    components: {chartPie, chartLine, chartStackLine},
    data() {
      return {
        selectProject: '1',
        sourceChartOption1: {
          chartType: 'chartPie',
          refID: `chartPie1`,
          text: '合同额',
          subText: '100%',
          series: [
            {data: [24], name: '类别1'},
            {data: [36], name: '类别2'},
            {data: [8], name: '类别3'},
            {data: [32], name: '类别4'}
          ]
        },
        sourceChartOption2: {
          chartType: 'chartPie',
          refID: `chartPie1`,
          text: '合同额',
          subText: '100%',
          series: [
            {data: [24], name: '类别1'},
            {data: [36], name: '类别2'},
            {data: [8], name: '类别3'},
            {data: [32], name: '类别4'}
          ]
        },
        sourceChartOption3: {
          chartType: 'chartLine',
          refID: `chartLine3`,
          text: '',
          subText: '',
          /* LineCharts
           * params: XAxis && LineName && Data
           * lineXAxisData: ['String']
           * SeriesData: [{ name: 'type String', // type: 'line', // stack: 'type String', data: 'type Array' }]
           * */
          xAxis: [
            '2010',
            '2011',
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
            '2018',
            '2019',
            '2020'
          ],
          series: [
            {
              name: '合同1',
              data: [300, 382, 320, 334, 390, 360, 320, 382, 300, 400, 400],
              color: '#00FEF4'
              // areaStyle: {}
            },
            {
              name: '合同2',
              data: [220, 282, 200, 234, 290, 330, 220, 282, 300, 210, 220],
              color: '#38F9C4'
              // areaStyle: {}
            },
            {
              name: '合同3',
              data: [130, 182, 200, 234, 190, 230, 220, 182, 190, 200, 200],
              color: '#E4E54C'
              // areaStyle: {}
            },
            {
              name: '合同4',
              data: [10, 182, 200, 234, 290, 330, 220, 182, 300, 400, 400],
              color: '#ED8D27'
              // areaStyle: {}
            }

          ]
        },
        sourceChartOption4: {
          chartType: 'chartLine',
          refID: `chartLine3`,
          text: '',
          subText: '',
          /* LineCharts
           * params: XAxis && LineName && Data
           * lineXAxisData: ['String']
           * SeriesData: [{ name: 'type String', // type: 'line', // stack: 'type String', data: 'type Array' }]
           * */
          xAxis: [
            '2010',
            '2011',
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
            '2018',
            '2019',
            '2020'
          ],
          series: [
            {
              name: '合同1',
              data: [300, 382, 320, 334, 390, 360, 320, 382, 300, 400, 400],
              color: '#00FEF4'
              // areaStyle: {}
            },
            {
              name: '合同2',
              data: [220, 282, 200, 234, 290, 330, 220, 282, 300, 210, 220],
              color: '#38F9C4'
              // areaStyle: {}
            },
            {
              name: '合同3',
              data: [130, 182, 200, 234, 190, 230, 220, 182, 190, 200, 200],
              color: '#E4E54C'
              // areaStyle: {}
            },
            {
              name: '合同4',
              data: [10, 182, 200, 234, 290, 330, 220, 182, 300, 400, 400],
              color: '#ED8D27'
              // areaStyle: {}
            }

          ]
        }
      }
    },
    methods: {
      deepCopy(data) {
        return JSON.parse(JSON.stringify(data))
      },
      getRandom(arr) {
        let dp = [...arr]
        return dp.sort(() => Math.random() - 0.5)
      },
      handleProjectChange() {
        const sourceChartOption1 = this.deepCopy(this.sourceChartOption1)
        sourceChartOption1.series = this.getRandom(sourceChartOption1.series)
        this.sourceChartOption1 = null

        setTimeout(() => {
          this.sourceChartOption1 = sourceChartOption1
        }, 100)

        const sourceChartOption2 = this.deepCopy(this.sourceChartOption2)
        sourceChartOption2.series = this.getRandom(sourceChartOption2.series)
        this.sourceChartOption2 = null

        setTimeout(() => {
          this.sourceChartOption2 = sourceChartOption2
        }, 100)

        const sourceChartOption3 = this.deepCopy(this.sourceChartOption3)
        sourceChartOption3.series.forEach(item => {
          item.data = this.getRandom(item.data)
        })

        this.sourceChartOption3 = null
        setTimeout(() => {
          this.sourceChartOption3 = sourceChartOption3
        }, 100)

        const sourceChartOption4 = this.deepCopy(this.sourceChartOption4)
        sourceChartOption4.series.forEach(item => {
          item.data = this.getRandom(item.data)
        })

        this.sourceChartOption4 = null
        setTimeout(() => {
          this.sourceChartOption4 = sourceChartOption4
        }, 100)
      }
    }
  }
</script>

<style scoped lang='less'>
  .big-screen-wrapper {
    width: 100%;
    height: calc(100% - 10px);
    background: url(~@/assets/hgxjc/lwdwyj/bg.png) no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-direction: column;

    .title-wrapper {
      background: url(~@/assets/hgxjc/lwdwyj/title.png) no-repeat;
      background-size: contain;
      position: relative;
      width: 100%;
      height: 110px;
      display: flex;
      align-content: center;
      justify-content: flex-start;
      flex-direction: column;
      padding-top: 1vw;
      flex-shrink: 0;

      & > * {
        text-align: center;
        font-size: 1vw;
        background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-weight: bold;
      }

      & > .title {
        font-size: 1.3vw;
      }

      & > .category {
        margin-top: 0.1vw;

        /deep/ * {
          background: transparent !important;
          border: none !important;
          background-image: linear-gradient(95deg, #99e0c8, #13D4D5) !important;
          background-clip: text !important;
          -webkit-background-clip: text !important;
          color: transparent !important;
        }
      }
    }

    .content-wrapper {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      & > div {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &.middle-wrapper1 {
          flex: 1.5;
          background: url(~@/assets/hgxjc/lwdwyj/middle.png) no-repeat;
          background-size: contain;
          background-position: center center;
          position: relative;
        }

        &.right-wrapper1 {
          background: url(~@/assets/hgxjc/lwdwyj/right.png) no-repeat;
          background-size: contain;
          position: relative;
          background-position: center center;
        }
        &.middle-wrapper2 {
          flex: 1.5;
          background: url(~@/assets/hgxjc/lwdwyj/middle2.png) no-repeat;
          background-size: contain;
          background-position: center center;
          position: relative;
        }

        &.right-wrapper2 {
          background: url(~@/assets/hgxjc/lwdwyj/right2.png) no-repeat;
          background-size: contain;
          position: relative;
          background-position: center center;
        }

        &.left-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding-left: 16px;

          .chart-title {
            background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            margin-top: 0.2vw;
            margin-left: 0.2vw;
            font-size: 0.8vw;
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 0;
          }

          & > div {
            width: 100%;
            height: 100%;
            flex: 1;
            flex-shrink: 0;
            position: relative;

          }
        }
      }
    }
  }
</style>